<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
    <title>报账大厅</title>
    <jsp:include page="head.jsp"></jsp:include>

    <style>
        body{
            overflow: hidden;
        }

        .userImg{
            display: block;
            height: 60px;
        }

    </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div id="header" class="layui-header">
        <div class="layui-logo">易捷报账系统</div>

        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;" class="userImg">
                    <img src="/static/img/tx_girl.png" class="layui-nav-img">
                    <span class="username"></span>
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="/user/profile" target="ifm" class="profile">基本资料</a></dd>
                    <dd><a href="">退了</a></dd>
                </dl>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域 -->
            <ul id="menu" class="layui-nav layui-nav-tree" lay-filter="menu">
            </ul>
        </div>
    </div>

    <div class="layui-body" style="background-color: rgb(245,247,249)">
        <!-- 内容主体区域 -->
        <div id="content">
            <iframe class="sub_page" name="ifm" runat="server" src="/sys/welcome" width="100%" height="500" frameborder="no" border="0" marginwidth="0"
            marginheight="0" scrolling="yes" allowtransparency="yes"></iframe>
        </div>
    </div>

    <div id="footer" class="layui-footer">
        © fqyd.com
    </div>
</div>

<script src="static/layui/layui.js"></script>
<script>
    layui.use('element', function () {
        var $ = layui.jquery;
        var element = layui.element;

        element.on('nav(menu)', function(elem){
           // var url = $(elem).attr("data-path")
           //  console.log(url)
           // $('.sub_page').attr('src',url)
        });


        $.get("/user/getInfo", function (res) {
            if (res.code == 200) {
                var user = res.data;
                var menus = user.menus;
                // 初始化菜单
                renderMenu(menus);
                element.init();
                // 用户名字、头像
                setUserInfo(user)
            }
        })
    })
</script>

<script>

    function changeFrameHeight(){
        var ifm= $(".sub_page");
        var header_h = $('#header').outerHeight();
        var footer_h = $('#footer').outerHeight();
        // ifm.height=$(window).height() - header_h - footer_h - 3;
        ifm.css('height',($(window).height() - header_h - footer_h - 3) + "px");
    }
    window.onresize=function(){ changeFrameHeight();}
    $(function(){changeFrameHeight();});


    function setUserInfo(user) {
        $(".username").text(user.name)
        if(user.sex == '男'){
            $('.userImg img').attr('src','/static/img/tx_boy.png');
        }else{
            $('.userImg img').attr('src','/static/img/tx_girl.png');
        }
    }

    function renderMenu(menus) {
        var menuUl = $('#menu');
        menus.forEach(function (menu) {
            var li = $('<li class="layui-nav-item"></li>');
            var menuChls = menu.childrens;
            if (menuChls.length > 0) {
                var a = $('<a href="javascript:;"><cite>' + menu.menuName + '</cite><span class="layui-nav-more"></span></a>');
                li.append(a)
                var dl = $('<dl class="layui-nav-child"></dl>');
                createChildMenu(dl, menuChls);
                li.append(dl);
            } else {
                var a = $('<a target="ifm" href="' + menu.menuPath + '" data-path="' + menu.menuPath + '"><cite>' + menu.menuName + '</cite></a>');
                console.log(a)
                li.append(a);
            }
            menuUl.append(li)
        })

    }

    function createChildMenu(root, menuChls) {
        menuChls.forEach(function (m) {
            var dd = $('<dd></dd>');
            var childrens = m.childrens;
            if (childrens.length > 0) {
                var a = $('<a href="javascript:;"><cite>' + m.menuName + '</cite><span class="layui-nav-more"></span></a>');
                dd.append(a)
                var dl = $('<dl class="layui-nav-child"></dl>');
                createChildMenu(dl, childrens);
                dd.append(dl);
                root.append(dd)
            }else{
                var a = $('<a target="ifm" href="' + m.menuPath + '" data-path="' + m.menuPath + '"><cite>' + m.menuName + '</cite></a>');
                dd.append(a);
                root.append(dd);
            }
        })

    }

</script>
</body>
</html>
